<script setup lang="ts">
import { computed } from 'vue';

import dayjs from 'dayjs';

interface TodoItem {
  title: string;
  description?: string;
  completed: boolean;
  priority?: 'high' | 'low' | 'medium';
  dueDate?: string;
}

interface TodoConfig {
  title: string;
  items: TodoItem[];
}

const props = defineProps<{
  config: TodoConfig;
}>();

const completedCount = computed(() => {
  return props.config.items.filter((item) => item.completed).length;
});

const pendingCount = computed(() => {
  return props.config.items.filter((item) => !item.completed).length;
});

const progressPercentage = computed(() => {
  if (props.config.items.length === 0) return 0;
  return Math.round((completedCount.value / props.config.items.length) * 100);
});

const updateProgress = () => {
  // 这里可以触发事件通知父组件更新
};

const formatDate = (date: string) => {
  return dayjs(date).format('MM-DD HH:mm');
};

const getPriorityType = (priority: string) => {
  switch (priority) {
    case 'high': {
      return 'danger';
    }
    case 'low': {
      return 'info';
    }
    case 'medium': {
      return 'warning';
    }
    default: {
      return '';
    }
  }
};

const getPriorityText = (priority: string) => {
  switch (priority) {
    case 'high': {
      return '高';
    }
    case 'low': {
      return '低';
    }
    case 'medium': {
      return '中';
    }
    default: {
      return '';
    }
  }
};
</script>

<template>
  <div class="todo-card">
    <div class="card-header mb-4 flex items-center justify-between">
      <h3 class="text-lg font-semibold">{{ config.title }}</h3>
      <el-badge :value="pendingCount" class="item">
        <el-icon>
          <component is="List" />
        </el-icon>
      </el-badge>
    </div>

    <div class="todo-list max-h-80 overflow-y-auto">
      <div
        v-if="config.items.length === 0"
        class="empty-state py-8 text-center text-gray-500"
      >
        <el-icon size="32">
          <component is="DocumentChecked" />
        </el-icon>
        <p class="mt-2">暂无待办事项</p>
      </div>

      <div v-else class="space-y-2">
        <div
          v-for="(item, index) in config.items"
          :key="index"
          class="todo-item flex items-center space-x-3 rounded-lg bg-gray-50 p-3 transition-colors hover:bg-gray-100"
        >
          <el-checkbox v-model="item.completed" @change="updateProgress" />
          <div class="flex-1">
            <div
              class="todo-title"
              :class="{ 'text-gray-500 line-through': item.completed }"
            >
              {{ item.title }}
            </div>
            <div
              v-if="item.description"
              class="todo-description mt-1 text-sm text-gray-500"
            >
              {{ item.description }}
            </div>
            <div
              v-if="item.dueDate"
              class="todo-date mt-1 text-xs text-gray-400"
            >
              截止: {{ formatDate(item.dueDate) }}
            </div>
          </div>
          <div v-if="item.priority" class="priority-badge">
            <el-tag :type="getPriorityType(item.priority)" size="small">
              {{ getPriorityText(item.priority) }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="config.items.length > 0"
      class="progress-section mt-4 border-t pt-4"
    >
      <div class="mb-2 flex items-center justify-between">
        <span class="text-sm text-gray-600">完成进度</span>
        <span class="text-sm font-semibold">
          {{ completedCount }}/{{ config.items.length }}
        </span>
      </div>
      <el-progress
        :percentage="progressPercentage"
        :stroke-width="6"
        :show-text="false"
      />
    </div>
  </div>
</template>

<style scoped>
.todo-card {
  height: 100%;
  padding: 20px;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 12px;
}

.todo-card h3 {
  color: #8b4513;
}

.todo-item {
  background: rgb(255 255 255 / 80%);
  border: 1px solid rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.todo-item:hover {
  background: rgb(255 255 255 / 90%);
  transform: translateX(2px);
}

.empty-state {
  color: #8b4513;
}

.text-sm.text-gray-600 {
  color: #8b4513 !important;
}

.text-sm.font-semibold {
  color: #8b4513 !important;
}
</style>
